<template>
  <ul class="comments-wrapper" v-show="data && data.length > 0">
    <li v-for="(item, index) in data" :key="index" class="comments border-bottom">
      <div class="avatar">
        <img :src="getImgSrc(item.avatarSrc)" width="35px" height="35px">
      </div>
      <div class="comments-info">
        <div class="comments-top">
          <div class="nickname">{{item.nickname}}</div>
          <div class="time">{{item.time}}</div>
          <div class="zan-wrapper">
            <span class="zan">{{item.zan}}</span>
            <span class="i-wrapper"><i class="weui icon-thumb-up-o"></i></span>
          </div>
        </div>
        <div v-if="item.moreComments && item.moreComments.length > 0" class="more-comments-wrapper">
          <div v-for="(moreItem, moreInd) in item.moreComments" :key="moreInd" class="more-comment-item border">
            <span class="nickname">{{moreItem.moreNickname}}</span>
            <span class="content" v-html="moreItem.moreContent"></span>
            <span class="index">{{moreItem.moreIndex}}</span>
          </div>
        </div>
        <p class="comments-content" v-html="item.commentContent"></p>
      </div>
    </li>
    <li class="open-app">
      <a target="_blank" href="https://m.smzdm.com/app/?is_detail=1">打开App 参与讨论</a>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
import { getImgSrc } from 'common/js/tools'

export default {
  name: 'comments-m',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getImgSrc (p) {
      return getImgSrc(p)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~common/stylus/mixin'

.comments-wrapper
  .comments
    display: flex
    padding: 10px
    .avatar
      flex: 0 0 35px
      width: 35px
      text-align: center
      img
        display: inline-block
        border-radius: 50%
    .comments-info
      flex: 1
      padding-left: 16px
      .comments-top
        position: relative
        margin-bottom: 16px
        .nickname
          font-size: 16px
          line-height: 24px
          font-weight: 600
          color: #000
        .time
          font-size: 10px
          line-height: 14px
          color: #888888
        .zan-wrapper
          position: absolute
          right: 0
          top: 2px
          .i-wrapper
            extend-click()
          span
            padding: 0 5px
            font-size: 14px
      .comments-content
        font-size: 14px
        line-height: 24px
        color: #666666
      .more-comments-wrapper
        color: #888888
        .more-comment-item
          position: relative
          padding: 4px 12px 4px 4px
          font-size: 14px
          line-height:14px
          margin-top: 6px
          background: #F9F9F9
          .nickname
            font-weight: 600
            color: #000
          .content
            line-height: 22px
          .index
            position: absolute
            right: 2px
            top: 2px
  .open-app
    text-align: center
    font-size: 14px
    line-height: 46px
</style>
